<template>
<!--  <div class="nav">-->

<!--    <el-menu-->
<!--        :default-active="activeIndex === 'null' ? '0' : activeIndex"-->
<!--        style="border-bottom: 0"-->
<!--        class="nav-box"-->
<!--        mode="horizontal"-->
<!--        @select="handleSelect"-->
<!--        background-color="#545c64"-->
<!--        text-color="#fff"-->
<!--        active-text-color="#ee3c3c">-->
<!--      <el-menu-item v-for="(nav, index) in navHeaders" :index="String(index)" :key="nav.type" @click="goPage(nav.path, index)">{{nav.name}}</el-menu-item>-->
<!--      <div class="login-box">-->
<!--        <el-button><span class="btn-toggle"></span></el-button>-->
<!--        <div class="not-login" v-if="!(login_status === '1')">-->
<!--          <p>-->
<!--            <span class="login" @click="goPage('/login')">登录</span>&nbsp;/&nbsp;-->
<!--            <span class="register" @click="goPage('/login')">注册</span>-->
<!--          </p>-->
<!--        </div>-->
<!--        <div class="user-box" v-else>-->
<!--          <el-dropdown>-->
<!--            <span class="el-dropdown-link">-->
<!--              {{name}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--            </span>-->
<!--            <template #dropdown>-->
<!--              <el-dropdown-menu>-->
<!--                <el-dropdown-item>个人信息</el-dropdown-item>-->
<!--                <el-dropdown-item>我的收藏</el-dropdown-item>-->
<!--                <el-dropdown-item>我的关注</el-dropdown-item>-->
<!--                <el-dropdown-item divided @click.native="userLogOut()">退出登录</el-dropdown-item>-->
<!--              </el-dropdown-menu>-->
<!--            </template>-->
<!--          </el-dropdown>-->
<!--        </div>-->
<!--      </div>-->
<!--    </el-menu>-->
<!--  </div>-->
  <div class="header-box">
  <div class="nav">
    <input type="checkbox" class="btn-toggle" id="btn-toggle">
    <label for="btn-toggle" class="btn-toggle-label">
      <span class="btn-toggle-icon"></span>
    </label>
    <ul class="nav-box">
      <li class="nav-item" v-for="(nav, index) in navHeaders" :class="{'header-active': index === 0}" :key="nav.type" @click="goPage(nav.path, index)">{{nav.name}}</li>
      <template v-if="login_status === '1'">
        <li class="nav-item nav-item-my-article" @click="goPage('/my-article')">我的文章</li>
        <li class="nav-item nav-item-dynamic" @click="goPage('/dynamic')">动态</li>
        <li class="nav-item nav-item-editor" @click="goPage('/editor')">编辑器</li>
      </template>
    </ul>
    <div class="login-box">
      <div class="not-login" v-if="!(login_status === '1')">
        <p>
          <span class="login" @click="goPage('/login')">登录</span>&nbsp;/&nbsp;
          <span class="register" @click="goPage('/register')">注册</span>
        </p>
      </div>
      <div class="user-box" v-else>
        <el-dropdown>
            <span class="el-dropdown-link">
              {{name}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click.native="goPage('/user/' + name)">个人信息</el-dropdown-item>
              <el-dropdown-item @click.native="goPage('/back-stage/')">用户后台</el-dropdown-item>
              <el-dropdown-item @click.native="goPage('/my-collect/')">我的收藏</el-dropdown-item>
              <el-dropdown-item @click.native="goPage('/my-attention/')">我的关注</el-dropdown-item>
              <el-dropdown-item divided @click.native="userLogOut()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import {navHeaders} from '@/assets/data/header'
import {logOut, userInfo} from "@/api/apis";
import {mapGetters} from "vuex";
export default {
  name: "Header",
  created(){
  },
  mounted() {
    this.getUserInfo()
    // this.addActive()
  },
  updated() {
  },
  data(){
    return {
      navHeaders: navHeaders,
      defaultActiveIndex: '0',
      // login_status: false,
      userinfo:{
        username:'',
        is_admin: false,
      }
    }
  },
  computed:{
    ...mapGetters([
      'activeIndex',
      'name',
      'login_status',
    ]),
  },
  methods:{
    goPage: function (path, index = -1) {
      // 更改store -> navHeader 中的activeIndex
      this.$store.commit('setActiveIndex', index)
      if (path === '/editor'){
        if(this.login_status !== '1'){
          this.$message.warning('未登录无法使用')
        }else{
          this.$router.push({path:path})
        }
      }else{
        // console.log(this.activeIndex)
        this.$store.commit('setActiveIndex', index)
        this.$router.push({path:path})
      }
    },
    handleSelect(index) {
      this.$store.commit('setActiveIndex', index)
    },
    getUserInfo(){
      // 有用户则更新用户名 无论是否重复
      if(this.login_status === '1') {
        // console.log('有用户')
        userInfo().then(response => {
          this.$store.commit('setName', response.data.username)
          this.$store.commit('setLoginStatus', '1')
          this.userinfo.is_admin = response.is_admin
        }).catch(() => {
          // 401 会进入此处
          this.$store.commit('setLoginStatus', '0')
          this.$store.commit('setName', '')
        })
      }else{
        // console.log('没有用户')
        // this.login_status = false
        this.$store.commit('setLoginStatus', '0')
      }
    },
    userLogOut(){
      // console.log('登出')
      logOut().then(response => {
        console.log(response)
        this.$store.commit('setLoginStatus', '0')
        this.$store.commit('setName', '')
      }).catch(err => {
        console.log(err)
      })
      if(this.$route.path === '/'){
        location.reload()
        // this.$router.go(0)
      }else {
        this.$router.push({name: 'home'})
      }
    },
    // 根据本地是否含用户名判断登录情况 废弃
    hasUser(){
      console.log(this.name)
      // console.log(this.$store.state.userinfo.name)
      // console.log(this.$store.state.userinfo.name != null)
      // console.log(this.$store.state.userinfo.name === '')
      if(this.name != null){
        console.log('0000000000000')
        if(this.name !== '') {
          console.log('------------')
          return true
        }
      }
      return false
    },
  },
  watch:{
    '$route.path': function (newValue) {
      let currentPath = newValue
      // console.log('当前在' + currentPath)
      let active_old = document.getElementsByClassName('header-active')[0];
      if (active_old) {
        active_old.classList.remove('header-active');
      }
      if(newValue === '/editor'){
        let active_new = document.getElementsByClassName('nav-item-editor')[0];
        active_new.classList.add('header-active');
      }else if(newValue === '/my-article'){
        let active_new = document.getElementsByClassName('nav-item-my-article')[0];
        active_new.classList.add('header-active');
      }else if(newValue === '/dynamic'){
        let active_new = document.getElementsByClassName('nav-item-dynamic')[0];
        active_new.classList.add('header-active');
      }else {
        for (let index in navHeaders) {
          // console.log(navHeaders[index].path)
          if (navHeaders[index].path === currentPath) {
            let nav_items = document.querySelectorAll('.nav-item')
            nav_items[index].classList.add('header-active');
            return
          }
        }
      }
    }
  }
}
</script>

<style scoped>
  /*.nav{*/
  /*  width: 100%;*/
  /*  position: fixed;*/
  /*  z-index: 100;*/
  /*  background-color: #4a5562;*/
  /*}*/
  /*.nav-box{*/
  /*  padding: 0 50px;*/
  /*}*/
  /*.login-box{*/
  /*  line-height: 60px;*/
  /*  color: white;*/
  /*  text-align: right;*/
  /*}*/
  /*.not-login>p>span{*/
  /*  cursor: pointer;*/
  /*}*/
  /*.el-dropdown-link{*/
  /*  color: white;*/
  /*}*/
  /*.btn-toggle{*/
  /*  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");*/
  /*}*/
  .header-box{
    width: 100%;
    z-index: 100;
    position: fixed;
    background-color: #4a5562;
  }
  .nav{
    width: 100%;
    margin: 0 auto;
    height: 60px;
    background-color: #4a5562;
  }
  .btn-toggle{
    float: left;
    display: none;
  }
  .btn-toggle-label{
    float: left;
    display: none;
    width: 60px;
    height: 60px;
  }
  .btn-toggle-icon{
    display: block;
    width: 40px;
    height: 40px;
    margin-top: 10px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .nav-box{
    float: left;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    /*flex-direction: column;*/
    flex-grow: 1;
    flex-direction: row;
    /*适配手机：导航栏依旧横向显示*/
    /*flex-direction: inherit;*/
  }
  .nav-item{
    line-height: 60px;
    cursor: pointer;
    color: white;
    list-style: none;
    position: relative;
    /*text-decoration: none;*/
    /*margin: 0 10px;*/
    padding: 0 20px;
  }
  .header-active{
    color: #f03752 !important;
  }
  .nav-item:hover{
    color: #f03752;
  }
  .nav-item::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 4px solid #e63929;
    transition: 0.1s all linear;
  }
  .nav-item:hover::before{
    left: 0;
    width: 100%;
  }
  .nav-item:hover ~ .nav-item::before{
    left: 0;
  }
  .login-box{
    line-height: 60px;
    color: white;
    text-align: right;
  }
  .not-login>p>span{
    cursor: pointer;
  }
  .el-dropdown-link{
    color: white !important;
  }
  @media screen and (max-width: 600px){
    .btn-toggle-label{
      display: block;
    }
    .nav-box{
      display: none;
    }
    .btn-toggle:checked ~ .nav-box{
      position: absolute;
      padding-bottom: 5px;
      padding-left: 5px;
      padding-right: 5px;
      display: block;
      background-color: #34495E;
      z-index: 0;
      margin-top: 60px;
    }
    .btn-toggle:checked ~ .nav-box>li{
      clear: both;
    }
  }
  @media screen and (min-width: 1300px){
    .nav{
      max-width: 1300px;
    }
  }
  @media screen and (max-width: 768px){
    .nav{
      max-width: 90%;
    }
  }
</style>
